<template>
	<view>
		<uni-popup
			ref="timePickRef"
			@maskClick="closePopup()"
			catchtouchmove="true"
		>
			<view class="popup-bd">
				<view class="popup-title mt20">
					时间区间选择
					<uni-icons
						type="closeempty"
						size="50rpx"
						color="#666666"
						class="popup-close"
						@click="closePopup()"
					></uni-icons>
				</view>
				<view class="popup-content">
					<view v-if="!readonly" @tap="openPopup('TimeRangePicker')">
						<view class="border-time">
							<uni-icons
								type="calendar"
								size="44rpx"
								color="#c0c4cc"
							></uni-icons>
							<view class="df w100 ml20">
								<view
									class="w45 tc"
									@tap="openTimePick('start')"
								>
									{{ startTime ? startTime : '开始时间' }}
								</view>
								<view class="w10 tc">-</view>
								<view class="w45 tc" @tap="openTimePick('end')">
									{{ endTime ? endTime : '结束时间' }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="popup-bottom df ac"
					><button class="primary-button w90" @tap="submitChoose()">
						确定
					</button></view
				>
			</view>
		</uni-popup>
		<timePick
			:show="isShowTimePicker"
			@close="closeTimePickerPopup"
			@submit="chooseTimePicker($event)"
		></timePick>
	</view>
</template>
<script>
import timePick from '@/subPackagesIndex/components/timePick/timePick.vue'
export default {
	components: { timePick },
	props: {
		show: {
			type: Boolean,
			value: false,
			default: false,
		},
	},
	data() {
		return {
			isShowTimePicker: false,
			openType: 'start',
			startTime: '',
			endTime: '',
		}
	},
	methods: {
		openTimePick(type) {
			this.openType = type
			this.isShowTimePicker = true
		},
		chooseTimePicker($event) {
			// const str = $event.replace(':','')
			// if(this.openType === 'end' && str < this.startTime.replace(':','')){
			// 	console.log(22222222)
			// 	uni.showToast({
			// 		title: '结束时间不能小于开始时间~',
			// 		icon: 'none'
			// 	})
			// 	this.endTime = ''
			// 	return
			// }
			if (this.openType === 'start') {
				this.startTime = $event
			} else {
				this.endTime = $event
			}
		},
		closeTimePickerPopup() {
			this.isShowTimePicker = false
		},
		submitChoose() {
			if (!this.startTime) {
				uni.showToast({
					title: '请选择开始时间~',
					icon: 'none',
				})
				return
			}
			if (!this.endTime) {
				uni.showToast({
					title: '请选择结束时间~',
					icon: 'none',
				})
				return
			}
			if (
				this.startTime.replace(':', '') > this.endTime.replace(':', '')
			) {
				uni.showToast({
					title: '结束时间不能小于开始时间~',
					icon: 'none',
				})
				return
			}
			this.$emit('submit', [this.startTime, this.endTime])
			this.closePopup()
		},
		openPopup() {
			this.$refs.timePickRef.open('bottom')
		},
		closePopup() {
			this.$refs.timePickRef.close()
			this.$emit('close')
		},
	},
	watch: {
		show(val) {
			if (val) {
				this.openPopup()
			} else {
				this.closePopup()
			}
		},
	},
}
</script>
<style scoped lang="scss">
.border-time {
	box-sizing: border-box;
	border-radius: 4px;
	border: 1px solid #e5e5e5;
	align-items: center;
	display: flex;
	flex-direction: row;
	padding: 10rpx 20rpx;
	color: #666;
}
</style>
